import React, {useState, useEffect} from 'react';
import {Button, Divider, message, Table, Modal, Spin, Drawer, Descriptions, Space} from 'antd';
import {ColumnsType} from "antd/lib/table";
import styles from './index.module.scss';
import {IPageResponse, IParam} from "@/common/common";
import {DeptItem} from "@/common/interfaces/dept";
import {queryDept} from "@/apis/dept";
import CreateDeptForm from "@/pages/system/dept/components/CreateDeptForm";
import UpdateDeptForm from "@/pages/system/dept/components/UpdateDeptForm";
import {PlusOutlined, SyncOutlined} from "@ant-design/icons";

const {confirm} = Modal;

const TableList: React.FC<any> = () => {

  const [row, setRow] = useState<DeptItem>();
  const [loading, setLoading] = useState<boolean>(false)

  const [stepFormValues, setStepFormValues] = useState<DeptItem>();
  const [selectedRows, setSelectedRows] = useState<DeptItem[]>([]);
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);

  const [params, setParams] = useState<IParam>({page: 1, size: 10});
  const [pageResponse, setPageResponse] = useState<any>({pageInfo: {page: 1, size: 10, total: 0}})

  useEffect(() => {
    setLoading(true)
    queryDept({}, true).then(res => {
      setPageResponse(res)
    }).finally(() => setLoading(false))
  }, [params]);

  const columns: ColumnsType<any> = [
    {
      title: '机构名称',
      key: 'deptName',
      dataIndex: 'deptName',
      align: "center",
      render: (value, record, index) => {
        return <a onClick={() => setRow(record)}>{value}</a>;
      }
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      align: "center",
      render: (text: any, record: any) => {
        return text;
      },
    },
    {
      title: '创建人',
      key: 'createBy',
      dataIndex: 'createBy',
      align: "center",
    },
    {
      title: '创建时间',
      key: 'createAt',
      dataIndex: 'createAt',
      align: "center",
    },
    {
      title: '更新人',
      key: 'updateBy',
      dataIndex: 'updateBy',
      align: "center",
    },
    {
      title: '更新时间',
      key: 'updateAt',
      dataIndex: 'updateAt',
      align: "center",
    },
    {
      title: '操作',
      key: 'option',
      dataIndex: 'option',
      align: "center",
      render: (text: any, record: any) => (
        <>
          <Button
            type="primary"
            size="small"
            onClick={() => {
              // handleUpdateModalVisible(true);
              // setStepFormValues(record);
            }}
          >
            编辑
          </Button>
          <Divider type="vertical"/>
          <Button
            type="primary"
            size="small"
            onClick={() => {
              // handleModalVisible(true);
              // setStepFormValues(record);
            }}
          >
            添加子机构
          </Button>
          <Divider type="vertical"/>
          <Button
            type="primary"
            danger
            size="small"
            onClick={() => {
              // showDeleteConfirm(record.id);
            }}
          >
            删除
          </Button>
        </>
      )
    },
  ]

  const renderToolBar = () => {
    return (
      <Space size={10}>
        <Button type="primary" onClick={() => handleModalVisible(true)}>
          新增
        </Button>
        <Button
          onClick={() => handleModalVisible(true)}>
          删除
        </Button>
        <Button type="dashed">
          <SyncOutlined/>
        </Button>
        {`共${pageResponse.pageInfo.total}条记录`}
      </Space>
    )
  }

  return (
    <div className={styles.container}>
      <div className={styles.toolBar}>{renderToolBar()}</div>
      <Spin spinning={loading}>
        <Table
          rowKey={"id"}
          columns={columns}
          dataSource={pageResponse.data || []}
          pagination={{
            current: pageResponse.pageInfo.page,
            pageSize: pageResponse.pageInfo.size,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: ["10", "20", "30"],
            total: pageResponse.pageInfo.total,
            showTotal: (total) => `共 ${total} 条`,
            onChange: (pageNo, pageSize) => {
              setParams({...params, ...{page: pageNo, size: pageSize}})
            }
          }}
        />
      </Spin>

      <CreateDeptForm
        key={'CreateDeptForm'}
        onSubmit={async (value) => {
          // const success = await handleAdd(value);
          handleModalVisible(false);
          setStepFormValues(undefined);
        }}
        onCancel={() => {
          handleModalVisible(false);
          setStepFormValues(undefined);
        }}
        createModalVisible={createModalVisible}
        parentId={stepFormValues?.id || 0}
      />

      <UpdateDeptForm
        key={'UpdateDeptForm'}
        onSubmit={async (value) => {
          // const success = await handleUpdate(value);
          handleUpdateModalVisible(false);
          setStepFormValues(undefined);
        }}
        onCancel={() => {
          handleUpdateModalVisible(false);
          setStepFormValues(undefined);
        }}
        updateModalVisible={updateModalVisible}
        currentData={stepFormValues || {}}
      />

      <Drawer
        width={600}
        visible={!!row}
        onClose={() => {
          setRow(undefined);
        }}
        closable={false}
      >
        {row?.id && (
          <Descriptions title="基本信息" bordered column={2} style={{margin: '20px 0 20px 20px', height: '400px'}}>
            {columns.map((item) => {
              return (
                <Descriptions.Item label={item.key}>
                  {item.key || ''}
                </Descriptions.Item>
              )
            })}
          </Descriptions>
        )}
      </Drawer>
    </div>
  )
}

export default TableList
